<%@ page import="com.memora.seguranca.SegUser" %>
<%@ page import="com.memora.usuario.Telefone" %>

<div class="row show-grid">
    <div class="col-md-6">

    	<div class="row show-grid">
    		<div class="col-md-4">
				<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'nome', 'error')} required">
					<label for="nome">
						<g:message code="segUser.nome.label" default="Nome" />
						<span class="required-indicator">*</span>
					</label>
					<g:textField class="form-control" name="nome" value="${segUserInstance?.nome}" required="" placeholder="${message(code: 'memora.label.exemplo.nome')}"/>
				</div>
    		</div>
    		<div class="col-md-8">
				<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'sobrenome', 'error')} required">
					<label for="sobrenome">
						<g:message code="segUser.sobrenome.label" default="Sobrenome" />
						<span class="required-indicator">*</span>
					</label>
					<g:textField class="form-control" name="sobrenome" value="${segUserInstance?.sobrenome}" required="" placeholder="${message(code: 'memora.label.exemplo.sobrenome')}"/>
				</div>
    		</div>
    	</div>	

    	<div class="row show-grid">
    		<div class="col-md-6">
    			<div id="emailDiv" class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'email', 'error')} required">
					<label for="email">
						<g:message code="segUser.email.label" default="E-mail" />
						<span class="required-indicator">*</span>
					</label>
					<g:textField id="email" class="form-control" type="email" name="email" onblur="validaEmail(this.value)" value="${segUserInstance?.email}" required="" placeholder="${message(code: 'memora.label.exemplo.email')}"/>
				</div>
    		</div>
			<div class="col-md-6">
				<label for="dataNascimento">
						<g:message code="segUser.dataNascimento.label" default="Data de Nascimento" />
					</label>
				<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'dataNascimento', 'error')} ">
					<g:datePicker class="form-control" name="dataNascimento" precision="day"  years="${1914..2014}" value="${registroInstance?.data}"  />
				</div>
    		</div>
		</div>

		<div class="row show-grid">
			<div class="col-md-2">
    			<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'sexo', 'error')} required">
					<label for="sexo">
						<g:message code="segUser.sexo.label" default="Sexo" />
						<span class="required-indicator">*</span>	
					</label>
					<g:select id="sexo" class="form-control" name="sexo" from="${['M', 'F']}" required="" value="${segUserInstance?.sexo}" style="width: 70px;" />
				</div>
    		</div>
    		<div class="col-md-5">
				<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'username', 'error')} required">
					<label for="username">
						<g:message code="memora.label.username" default="Username" />
						<span class="required-indicator">*</span>
					</label>
					<g:textField class="form-control" name="username" required="" value="${segUserInstance?.username}" placeholder="${message(code: 'memora.label.exemplo.usuario')}"/>
				</div>
    		</div>
    		<div class="col-md-5">
				<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'password', 'error')} required">
					<label for="password">
						<g:message code="memora.label.password" default="Password" />
						<span class="required-indicator">*</span>
					</label>
					<g:passwordField class="form-control" type="password" name="password" required="" required="" value="${segUserInstance?.password}" placeholder="${message(code: 'memora.label.exemplo.senha')}"/>
				</div>	
    		</div>
    	</div>	
		
		<div id="novosTelefones" >
			<g:if test="${telefoneInstanceList}">

				<%def contador = 0%>

				<g:each in="${telefoneInstanceList}" status="i" var="telefoneInstance">

					<div id="grupo_telefone_ed${contador}" class="row show-grid">
						<div class="col-md-12">
							<div class="form-group fieldcontain">
								<div style="float: left; margin-right: 5px;">
									<div class="input-group" style="width: 180px;">
										<div class="input-group-addon">
											<i class="fa fa-phone"></i>
										</div>
										<input type="text" name="numeroTelefone" class="form-control" phone-mask="" value="${telefoneInstance.numeroTelefone}" placeholder="(00) 0 0000-0000">
									</div>
								</div>
								<div style="float: left; margin-right: 5px;">
									<g:select id="descricaoTelefone" class="form-control" name="descricaoNumero" from="${telefoneInstance.constraints.descricaoNumero.inList}" value="${telefoneInstance?.descricaoNumero}" valueMessagePrefix="telefone.descricaoNumero" style="width: 120px; float: left;"/>
								</div>	
								<g:if test="${contador>0}">
									<div>
										<a id="remove_grupo_telefone_ed${contador}" class="btn btn-app-memora" onclick="javascript:removeTelefone(this.id);">
											<i class="fa fa-times">
											</i> 
										</a>
									</div>
								</g:if>
							</div>
						</div>
					</div>

					<%contador++%>
				</g:each>
			</g:if>
			<g:else>
				<div class="row show-grid">
					<div class="col-md-12">
						<label for="telefone">
							<g:message code="telefone.numeroTelefone.label" default="Numero de Telefone" />
						</label>
						<div id="telefoneLista" class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'telefone', 'error')} ">
						    <div style="float: left; margin-right: 5px;">
						        <div class="input-group" style="width: 180px;">
								    <div class="input-group-addon">
								        <i class="fa fa-phone"></i>
								    </div>
								    <input id="numeroTelefone" name="numeroTelefone" type="text" class="form-control" phone-mask placeholder="${message(code: 'memora.label.exemplo.numerotelefone')}"/>
								</div>
						    </div>
						    <div style="float: left; margin-right: 5px;">
						        <g:select id="descricaoTelefone" class="form-control" name="descricaoNumero" from="${telefoneInstance.constraints.descricaoNumero.inList}" value="${telefoneInstance?.descricaoNumero}" valueMessagePrefix="telefone.descricaoNumero" style="width: 120px;"/>
						    </div>
						</div>
					</div>
				</div>
			</g:else>
		</div>

		<a class="btn btn-app-memora" href="javascript:adicionarTelefone();" style="margin-bottom: 10px; font-size: 14px;">
			<g:message code="memora.message.adicionarnovo" default="Adicionar novo"/>
		</a>

		<div class="form-group fieldcontain ${hasErrors(bean: segUserInstance, field: 'sobremim', 'error')} ">
			<label for="sobremim">
				<g:message code="segUser.sobremim.label" default="Sobre mim" />
			</label>
			<g:textArea class="form-control" name="sobremim" value="${segUserInstance?.sobremim}" placeholder="${message(code: 'memora.label.exemplo.sobremim')}"/>
		</div>

    </div>
    <div class="col-md-6">
    	<div class="form-group">
	    	<label for="nome">
				<g:message code="memora.label.avatar" default="Avatar" />
			</label>
			<br/>
			<div id="imagemPerfil">
				<a data-toggle="modal" data-target="#compose-modal" class="thumbnail" style="width: 180px; height: 180px;">
			      <img src="/SysMemora/img/avatar/${segUserInstance?.avatar}.png">
			    </a>
			</div>

	      	<g:hiddenField id="hiddenFieldAvatar" name="avatar" value="${segUserInstance?.avatar}" />	

	    </div>

		<a class="btn btn-app" data-toggle="modal" data-target="#compose-modal">
            <i class="fa fa-picture-o"></i> 
            <g:message code="memora.button.escolheravatar" default="Escolher Avatar"/>
        </a>
        
        <g:render template="listaAvatar"/>
    </div>
</div>	

<!-- Telefone -->
<g:javascript src="memora/telefone-memora.js"/>
<!-- Avatar -->
<g:javascript src="memora/avatar-memora.js"/>
<!-- Valida E-mail -->
<g:javascript src="memora/email-memora.js"/>		